<template>
  <div class="desktop_time">
    <div class="desktop_time_icon">
      <LogoutOutlined class="back" @click="handleClick" />
    </div>
    <div class="date">{{ date }}</div>
    <div class="clock">{{ time }}</div>
    <div class="divider"></div>
    <div class="week">
      {{ weeksEn[week] }} 周{{ weeks[week] }}
      <div>多雲 12℃</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { LogoutOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const date = ref('');
const time = ref('');
const weeks = ['日', '一', '二', '三', '四', '五', '六'];
const weeksEn = [
  'SUNDAY',
  'MONDAY',
  'TUESDAY',
  'WEDNESDAY',
  'THURSDAY',
  'FRIDAY',
  'SATURDAY'
];
const week = ref();
const getTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  date.value = `${year}/${month}/${day}`;
  const hour = String(now.getHours()).padStart(2, '0');
  const minute = String(now.getMinutes()).padStart(2, '0');
  const second = String(now.getSeconds()).padStart(2, '0');
  week.value = now.getDay();
  time.value = `${hour}:${minute}:${second}`;
  requestAnimationFrame(getTime);
};
getTime();

const router = useRouter();
const handleClick = () => {
  router.back();
  globalThis.api.setWindowSize();
};
</script>
<style scoped lang="less">
.desktop_time {
  position: relative;
  width: 100%;
  -webkit-app-region: drag;
  color: #fff;
  letter-spacing: 2px;
  font-size: 20px;
  user-select: none;
  overflow: hidden;
  &_icon {
    width: 30px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-app-region: none;
    .back {
      padding: 0 5px;
      position: absolute;
      top: 45%;
      right: 0;
      transition: all 0.3s ease-in-out;
      transform: translate(100%, 0);
    }
    &:hover {
      .back {
        transform: translate(0, 0);
      }
    }
  }
  .date {
    font-size: 16px;
  }
  .clock {
    font-size: 32px;
    font-weight: 500;
    font-family: 'Courier New', Courier, monospace;
  }
  .week {
    display: flex;
    justify-content: space-around;
    font-size: 16px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  }
}
.divider {
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.3);
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 60%;
    width: 2px;
    height: 50px;
    background-color: #fff;
  }
}
</style>
